<template>
  <div class="detail-wrap">
    <component-back :title="tilte"></component-back>
    <component-scroll ref="scroll"
                      class="scroll"
                      :data="swiperList">
      <div class="content">
        <detail-swiper :list="swiperList"
                       @loadImg="loadDataed"
                       v-if="swiperList.length"></detail-swiper>
        <dl class="detail-info">
          <dt>{{info.name}}<span>（店铺编号：{{info.agent_number}}）</span> </dt>
          <dd class="shop shop-info">店铺编号：{{info.agent_number}}</dd>
          <dd class="shop shop-info">店铺名称：{{info.name}}</dd>
          <dd class="shop shop-info">店铺电话：{{info.tel}}</dd>
          <dd class="shop shop-info">店长电话：{{info.shopowner_tel}}</dd>
          <dd class="shop address">店铺地址：{{info.addr}}</dd>
          <dd class="location"
              @click="handleLocation(info)">
            <div class="iconfont icon">&#xe67c;</div>
          </dd>
          <dd class="shop marker">备注：{{info.desc}}</dd>
        </dl>
        <div class="space"
             border-top-bottom-1px></div>
        <div class="service">
          <h3 class="">本店提供服务></h3>
          <ul class="service-list">
            <li class="item"
                v-for="(item,index) of info.service"
                :key="index">{{item.service_name}}</li>
          </ul>
        </div>
        <div class="space"
             border-top-bottom-1px></div>
        <div class="service-content"
             v-html="info.content"></div>
        <component-footer :info="footerInfo"></component-footer>
      </div>
    </component-scroll>
  </div>
</template>

<script>
import ComponentBack from 'common/back'
import ComponentScroll from 'common/scroll'
import DetailSwiper from './components/swiper'
import ComponentFooter from 'common/footer'
import commonWx from '@/assets/js/wx'
export default {
  name: 'Detail',
  components: {
    ComponentBack,
    ComponentScroll,
    DetailSwiper,
    ComponentFooter
  },
  data () {
    return {
      tilte: '服务详情',
      swiperList: [], // 轮播
      info: {},
      footerInfo: {}
    }
  },
  methods: {
    // 获取轮播
    getDetailSwiper () {
      this.$api.detail.getDetailSwiper()
        .then(this.getDetailSwiperSucc)
    },
    getDetailSwiperSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.footerInfo = data.footInfo
      }
    },
    // 详情数据
    getDetailInfo () {
      const id = this.$route.params.id
      this.$api.detail.getDetailInfo({ id })
        .then(this.getDetailSucc)
    },
    getDetailSucc (res) {
      const CDDE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CDDE_OK && res.data) {
        const data = res.data
        this.info = data.detail
        this.swiperList = [data.detail.images]
        console.log(this.swiperList)
        const url = window.location.href
        commonWx.onMenuShareAppMessage(data.detail.name, url, data.detail.images, data.detail.share_desc)
        commonWx.onMenuShareTimeline(data.detail.name, url, data.detail.images, data.detail.share_desc)
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    },
    // 计算滚动
    loadDataed () {
      if (!this.checkLoaded) {
        this.$refs.scroll.refresh()
        this.checkLoaded = true
      }
    },
    // 地图
    handleLocation (info) {
      commonWx.getOpenLocation(info.lat, info.lng, info.name, info.addr)
    }
  },
  activated () {
    this.getDetailSwiper()
    this.getDetailInfo()
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.detail-wrap
  touch-action none
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  overflow hidden

.scroll
  top 88px

.detail-info
  padding()
  width 100%

  dt
    width 100%
    line-height 82px
    font-size $back_fz
    color $common_fz_color
    margin-bottom 10px
    font-weight 500

    span
      font-size $address
      color $address_color
      margin-left 10px
      font-weight normal

  .shop
    line-height 40px
    font-size $address
    color $common_fz_color
    margin-bottom 5px

  .shop-info
    width 100%
    ellipsis()

  .location
    display flex
    justify-content flex-end
    line-height 40px

    .icon
      font-size $back_fz
      color $address_color

  .marker
    color $marker_color
    margin-bottom 26px

  .address
    white-space pre-line

.space
  width 750px
  height 20px
  background $space

.service
  width 100%
  padding()

  h3
    font-size 28px
    color $common_fz_color
    line-height 90px
    margin-bottom 9

  .service-list
    display flex
    flex-wrap wrap
    margin-bottom 40px

    .item
      padding-left 47px
      padding-right 47px
      box-sizing border-box
      height 59px
      border 2px solid $service
      border-radius 25px
      display flex
      justify-content center
      align-items center
      font-size $shop_name
      font-weight 500
      color $service
      margin-right 25px

.service-content
  padding()
  padding-top 35px
  padding-bottom 12px
  min-height 500px
</style>
